<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/website/common/base.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>巨达收银台</title>
    <%@ include file="/website/common/common.jsp" %>
    <link href="${webctx }/css/payment.css" rel="stylesheet" type="text/css"/>
    <style>
        .logo1{
            width: 200px;
            float: left;
        }
        .headlogo{
            /*margin-top: 34px;*/
        }
        .logo1 img{
            max-height: 56px;
            border: none;
            position: relative;
            top: 30px;
        }

        .title-w {
            width: 800px;
            color: #333;
            display: inline-block;
        }
        .title{
            font-size: 16px;
            padding: 20px 0 15px 10px;
        }

        .p-title {
            width: 190px;
            float: left;
            margin-top: 48.5px;
            font-size: 28px;
            color: #333333;
        }

        .jine {
            /*width: 300px;*/
            padding: 20px 0 15px 20px;
            font-size: 16px;
            text-align: right;
            float: right;
        }

        .jine i {
            margin: 0 5px;
            font-style: normal;
            color: #FF6767;
        }

        .tishi {
            padding: 0px 0 27px 20px;
            color: #999;
        }

        .tishi a {
            font-size: 16px;
            color: #0daeff;
            float: right;
            margin-bottom: 10px;
        }

        .img {
            margin-top: 42.5px;
            float: left;
            margin-left: 30px;
            margin-right: 30px;
        }

        .jiantou {
            margin: 0 7px;
        }

        .jiantou2 {
            margin: 1px 7px;
            -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        .dizhi {
            font-size: 14px;
            color: #666;
            padding: 10px 10px 14px 10px;
        }

        .order {
            font-size: 14px;
            color: #666;
            padding: 0 10px 20px 10px;
        }

        .biankuang {
            display: none;
            border-top: 1px solid #EEEEEE;
        }

        .biankuang2 {
            border: 1px solid #EEEEEE;
            position: relative;
        }

        .qita {
            width: 1146px;
            padding: 36px 20px 20px 42px;
        }

        .qita a {
            float: right;
            font-size: 14px;
            color: #0daeff;
        }

        .yindao {
            margin-left: 180px;
            display: inline;
            float: left;
            margin-top: 50px;
        }

        .erweima {
            float: right;
            margin-right: 254px;
            margin-top: 110px;
            margin-bottom: 20px;
        }
        .we-shou{
            position: absolute;
            top: 72%;
            left: 58.6%;
            font-size: 16px;
            color: #666666;
        }
    </style>
</head>
<body>
<%@ include file="/website/common/top-pay.jsp" %>

<div id="wrap-head">
    <div class="head wid990 clearfix">
        <div class="logo1 headlogo">
            <a href="${ctx }/website/index.jsp"><img src="${webctx }/images/logo.png"/></a>
        </div>
        <img class="img" src="${webctx }/images/pay/shuxian.png"/>
        <p class="p-title">微信支付</p>
    </div>
</div>
<div id="Warp_pay">
    <div class="wid990">
        <div class="clearfix">
            <div class="title title-w">请您及时付款，以便为您及时处理订单。订单编号：${payment.order_sn}</div>
            <div class="jine">支付金额:<i>${payment.amount}</i>元</div>
        </div>
        <div class="tishi"><a href="javascript:void(0);">订单详情<img class="jiantou" src="${webctx }/images/pay/jiantou.png"/></a></div>
        <div class="biankuang">
            <div class="order-container pay-method">
                <p class="dizhi">收货地址：${receipt_shen}${receipt_shi}${receipt_qu}${receipt_address} &nbsp;&nbsp;联系人：${receipt_user}&nbsp;&nbsp;联系电话：${receipt_phone}</p>
                <p class="order">订单商品：${productname}</p>
            </div>
        </div>
        <div class="biankuang2">
            <div class="qita clearfix" style="display: none;">
                <a href="#">使用其它支付方式<img class="jiantou2" src="${webctx }/images/pay/jiantou.png"/></a>
            </div>
            <div style="width: 990px;height: 400px;margin: 0 auto">
                <div class="yindao">
                    <img src="${webctx }/images/pay/yindaotu.png"/>
                </div>
                <div id="qrcode" class="erweima">
                </div>
                <div class="we-shou">
                    <p>打开微信扫一扫</p>
                    <p>扫描二维码付款</p>
                </div>
            </div>
        </div>
    </div>
</div>

<%@ include file="/website/common/foot-site.jsp" %>
<input name="ordercode" value="${order.code }" type="hidden">
<input name="couponPageCount" type="hidden">
<script src="${webctx}js/qrcode.min.js"></script>
<script type="text/javascript">
    //js显示二维码
    var qrcode = new QRCode('qrcode', {
        text: '${codeUrl}',
        width: 160,
        height: 160,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });

    $(function () {
        //支付成功，支付页面关闭
        setInterval("ajaxstatus()", 5000);
    });

    function ajaxstatus() {
        $w.httpRequest({
            url: "${ctx}/payment/state/${payment.sn}",
            method: "GET",
            ok: function (ret) {
                var state = ret.Data;
                if (state) {
                    window.location.href = "${ctx}/payment/result/" + state + "/${payment.order_sn}";//页面跳转
                }
            }
        });
    }

    $(".tishi").on("click", function () {
        if ($(".biankuang").is(":hidden")) {
            $(".biankuang").show();
            $(this).find(".jiantou").css("transform", "rotate(180deg)")
        } else {
            $(".biankuang").hide();
            $(this).find(".jiantou").css("transform", "rotate(0)")
        }
    })
</script>
</body>
</html>
